<template>
  <div class="content">
    <!-- 轮播区域 -->
    <div class="lunbo">轮播图</div>
    <!-- 商品购买区域 -->
    <div class="buyGoods">
      <h3>{{goodsInfo.title}}</h3>
      <hr>
      <p>
        <span>市场价：{{goodsInfo.market_price}}</span>
        <span>销售价：{{goodsInfo.sell_price}}</span>
      </p>
      <p>
        <span>
          购买数量：
          <el-input-number
            v-model="num"
            @change="handleChange"
            :min="1"
            :max="goodsInfo.stock_quantity"
            label="描述文字"
          ></el-input-number>
        </span>
      </p>
      <div class="buy">
        <input type="button" value="立即购买">
        <input type="button" value="加入购物车" @click="addcar">
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="params">
      <p>商品参数</p>

      <h3>{{$store.state.num}}</h3>

      <hr>
      <p>商品货号：{{goodsInfo.goods_no}}</p>
      <p>库存情况：{{goodsInfo.stock_quantity}}件</p>
      <p>上架时间：{{goodsInfo.add_time | dateFormat}}</p>
      <input type="button" value="图文介绍" @click="goDesc(goodsInfo.id)">
      <input type="button" value="商品详情" @click="goComment(goodsInfo.id)">
    </div>
  </div>
</template>
<script>
// import mui from '../../lib/mui.min.js'
export default {
  data() {
    return {
      id: this.$route.params.id,
      goodsInfo: {}, //商品的信息
      num: 1
    };
  },
  created() {
    this.getGoodsInfo();
  },
  mounted() {},
  methods: {
    // 加入购物车
    // 点击加入购物车时，目的要把一些数据放到vuex中存储起来state.car
    addcar() {
      var carinfo = {
        id: this.id,
        count: this.num,
        price: this.goodsInfo.sell_price,
        selected: true
      };
    //   vuex中的方法改变state中的car
    this.$store.commit('addtocar',carinfo)
    },
    goDesc(id) {
      this.$router.push({ name: "goodsdesc", params: { id } });
    },
    goComment(id) {
      this.$router.push({ name: "goodscomment", params: { id } });
    },
    handleChange(value) {
      //   console.log(value);
    },
    getGoodsInfo() {
      this.$http.get("api/goods/getinfo/" + this.id + "").then(result => {
        if (result.body.status == 0) {
          this.goodsInfo = result.body.message[0];
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  .lunbo {
    width: 100%;
    height: 100px;
    background-color: #eee;
  }
  .buyGoods {
    widows: 100%;
    height: 200px;
    background-color: #ccc;
  }
  .details {
    width: 100%;
    height: 200px;
    background-color: lightblue;
  }
}
input {
  width: 100px;
  height: 30px;
  background-color: lightblue;
  color: #fff;
  outline: none;
}
</style>
